<template>
  <div class="userinfo">
    <div class="infotitle van-hairline--bottom">
      信息修改
    </div>
    <div class="userinput">
      <van-field v-model="user.name"
                 required
                 label="姓名"
                 placeholder="请输入姓名" />
      <van-field v-model="user.phone"
                 required
                 label="手机号"
                 placeholder="请输入手机号" />

      <van-field v-model="user.housenumber"
                 required
                 label="门牌号"
                 placeholder="如(1号楼1单元0101室)" />
      <van-field v-model="user.idnumber"
                 label="身份证(选填)"
                 placeholder="请输入身份证" />
    </div>
    <van-button type="primary"
                @click="submit"
                block>提交信息</van-button>
  </div>
</template>

<script>
import { Notify } from 'vant'
export default {
  name: 'userinfo',
  data () {
    return {
      user: {
        name: '',
        phone: '',
        housenumber: '',
        idnumber: ''
      }
    }
  },
  async created () {
    let getInfo = await this.axios.get(this.api.getInfo)
    if (getInfo.code == 200) {
      this.user = getInfo.data
      return Notify({ type: 'success', message: getInfo.msg })
    } else {
      return Notify({ type: 'danger', message: getInfo.msg })
    }
  },
  methods: {
    //提交用户信息
    async submit () {
      let { user } = this
      if (!user.name.trim()) {
        return Notify({ type: 'danger', message: '姓名不能为空' })
      } else if (!(/^1[3456789]\d{9}$/.test(user.phone))) {
        return Notify({ type: 'danger', message: '请输入正确手机号' })
      } else if (!user.housenumber.trim()) {
        return Notify({ type: 'danger', message: '门牌号不能为空' })
      } else if (user.idnumber.trim()) {
        if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(user.idnumber) === false) {
          return Notify({ type: 'danger', message: '请输入正确的身份证号' })
        }
      }
      let postInfo = await this.axios.post(this.api.postInfo, user)
      if (postInfo.code == 200) {
        return Notify({ type: 'success', message: postInfo.msg })
      } else {
        return Notify({ type: 'danger', message: postInfo.msg })
      }
    }
  },

}
</script>

<style lang="scss" scoped>
.infotitle {
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.userinput {
  padding: 20px 0;
}
</style>
